import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
    state = {
        hasError: '' // 用于标识子组件是否产生错误
    }

    // parent的子组件报错时触发, 并携带错误信息, 只能捕获生命周期中出的错
    static getDerivedStateFromError(error) {
        console.log(error);
        return {hasError: error}
    }

    componentDidCatch(error, info) {
        // 统计页面错误, 发送请求到后台
        console.log('渲染组件时出错', error, info);
    }

    render() {
        return (
            <div>
                <h3>I am Parent</h3>
                {this.state.hasError ? <h2>当前网络不稳定, 请稍后再试</h2> : <Child/>}
                </div>
        );
    }
}

export default Parent